import axios from 'axios'
import React from 'react'
import { Button, Input, Form, Notify } from 'react-vant'
import { useAppDispatch } from '../../app/hooks'
import { loginSuccess } from '../../features/user'
import { useNavigate } from 'react-router-dom'

export default () => {
  const [form] = Form.useForm()
  const dispatch = useAppDispatch()
  const navigate = useNavigate()
  const onFinish = async (values: any) => {
    const resp = await axios.post('/api/login', values);
    const { code, message, data } = resp.data;
    if(code === 200) {
      // 保存数据
      dispatch(loginSuccess(data))
      Notify.show({ type: "success", message })
      navigate(-1)
    } else {
      Notify.show({ type: "danger", message })
    }
  }

  return (
    <Form
      form={form}
      onFinish={onFinish}
      footer={
        <div style={{ margin: '16px 16px 0' }}>
          <Button round nativeType='submit' type='primary' block>
            提交
          </Button>
        </div>
      }
    >
      <Form.Item
        rules={[{ required: true, message: '请填写用户名' }]}
        name='username'
        label='用户名'
      >
        <Input placeholder='请输入用户名' />
      </Form.Item>
      <Form.Item
        rules={[{ required: true, message: '请填写密码' }]}
        name='password'
        label='密码'
      >
        <Input placeholder='请输入密码' />
      </Form.Item>
    </Form>
  )
}
